<template>
	<view class="wrap">
		<view class="header">
			<view class="search">
				<image class="fdj_icon"
					src="http://106.52.75.114/uploads/attach/2025/06/20250625/90375afb0ba4ab88accebd3fee0761ec.png"
					mode="" /> 新品暖心鸡汤5折半价
			</view>
			<view class="hot-list">
				<view class="hot-item">热搜：</view>
				<view class="hot-item" v-for="(ele, index) in hotList" :key="index">{{ ele }}</view>
			</view>
			<view class="banner">
				<swiper indicator-dots>

					<swiper-item v-for="ele in bannerList" :key="ele.url">
						<image :src="ele.img" mode="widthFix" />
					</swiper-item>

				</swiper>
			</view>
		</view>

		<view class="jgg">
			<view class="item" v-for="ele in navList" :key="ele.id">
				<image :src="ele.img" mode="widthFix" />
				<text>{{ ele.title }}</text>
			</view>
		</view>

		<view class="notice">
			<view class="icon">
				<image src="http://106.52.75.114/uploads/attach/2023/06/20230614/bc5819be3c6638085e2da7a3a3c300b7.png"
					mode="widthFix" />
			</view>
			<text>周末限量优惠，周二会员日最低两折，八月惊喜不断~</text>
		</view>
		<view class="promation">
			<view class="p-top">
				<view class="left">
					<image
						src="http://106.52.75.114/uploads/attach/2023/06/20230614/6f45a5d7ae5537e5d2b7b69218f59e72.png"
						mode="widthFix" />
					<text class="title">促销精品</text>
					<text class="sub-title">诚意推荐品质商品</text>
				</view>
				<view class="right">
					<image
						src="http://106.52.75.114/uploads/attach/2023/06/20230614/d7018b03c9ef31356c0b7aeb16817f9d.png"
						mode="widthFix" />
				</view>
			</view>
			<view class="p-content">

				<view v-for='ele in cxList' :key='ele.id' class="item">
					<view class="left">
						<image :src="ele.image" alt="widthFix" />
						<view class="info">
							<text>{{ ele.store_name }}</text>
							<view class="price">
								<view class="num">￥{{ ele.price }}</view>
								<view class="num del">¥ {{ ele.ot_price }}</view>
							</view>
						</view>
					</view>
					<view class="right" @click="goDetail(ele.id)">
						抢购
					</view>
				</view>


			</view>
		</view>
		<view class="news">
			<view class="title">
				<text class="l-title">新品·首发</text>
				<text class="more">更多</text>
			</view>
			<view class="content">

				<view class="item" @click="goDetail(ele.id)" v-for="ele in xpList" :key="ele.id">
					<view class="top">
						<image :src="ele.image" alt="widthFix" />
						<view class="info">
							<text>{{ ele.store_name }}</text>
							<view class="sale">月售 {{ele.sales }} </view>
							<view class="price">
								<view class="num">￥{{ ele.price}}</view>
								<view class="num del">¥ {{ ele.ot_price }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="signal-goods">
			<view class="p-top">
				<view class="left">
					<image
						src="http://106.52.75.114/uploads/attach/2023/06/20230614/779f1b5f67ffbb493356217b0ec834a7.png"
						mode="widthFix" />
					<text class="title">精选单品</text>
					<text class="sub-title">诚意推荐品质商品</text>
				</view>
				<view class="right">
					<image
						src="http://106.52.75.114/uploads/attach/2023/06/20230614/d7018b03c9ef31356c0b7aeb16817f9d.png"
						mode="widthFix" />
				</view>
			</view>
			<view class="p-content">

				<view class="item" @click="goDetail(ele.id)" v-for="ele in dpList" :key="ele.id">
					<view class="top">
						<image :src="ele.image" alt="widthFix" />
						<view class="info">
							<text>{{ ele.store_name }}</text>
							<view class="price">
								<text class="num">￥{{ ele.price }}</text>
							</view>
						</view>
					</view>
				</view>


			</view>
		</view>

		<view class="category">
			<!-- v-for 遍历的时候，当前项 和 用户点击的项一致(需要一个变量记录点击的ID)，则高亮 -->
			<view class="tabs">
				<view class="item" :class=" ele.id == currentTabId ? 'active' : '' " @click="tabHandler(ele)"
					v-for="ele in cateList" :key="ele.id">{{ ele.cate_name }}</view>
			</view>
			<view class="tab-content">

				<view class="item" v-for="ele in goodsList" :key="ele.id">
					<view class="left">
						<image :src="ele.image" alt="widthFix" />
						<view class="info">
							<text>{{ ele.store_name }}</text>
							<view class="stock">库存：{{ ele.stock }}</view>
							<view class="price">
								<view class="num">￥{{ ele.price }}</view>
								<view class="num del">已售 {{ ele.sales }}</view>
							</view>
						</view>
					</view>
					<view class="right" @click="goDetail(ele.id)">
						抢购
					</view>
				</view>



			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotList: [],
				navList: [],
				bannerList: [],
				cxList: [],
				xpList: [],
				dpList: [],
				cateList: [],
				currentTabId: -1,
				goodsList: [],
			}
		},
		// uniapp 里面的生命周期函数=  vuejs + 小程序
		// vuejs 里面也有生命周期函数
		onLoad() {

		},
		created() {

		},
		onShow() {
			this.getHotListApi();
			this.getNavListApi();
			this.getBannerListApi();
			this.getCxListApi();
			this.getXpListApi();
			this.getDpListApi();
			this.getCateListApi();
		},

		methods: {
			goDetail(id) {
				// 点击的时候前往详情 https://uniapp.dcloud.net.cn/api/router.html#navigateto
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id,
				})
			},
			getGoodsListByCidApi() {
				uni.request({
					url: 'http://106.52.75.114/api/products?keyword&priceOrder&salesOrder&news=0&page=1&limit=10&cid=' +
						this.currentTabId,
					success: (res) => {
						// console.log('res 分类下的列表', res.data);
						this.goodsList = res.data.data;

					}
				});

			},
			tabHandler(ele) {
				// console.log('tabHandler', ele, ele.cate_name);
				this.currentTabId = ele.id;

				this.getGoodsListByCidApi();
			},
			getCateListApi() {
				uni.request({
					url: 'http://106.52.75.114/api/category',
					success: (res) => {
						// console.log('res 分类', res.data);	
						this.cateList = res.data.data;

						// 一般来说是第一个高亮
						this.currentTabId = this.cateList[0].id;
						// 获取第一个分类的商品列表
						this.getGoodsListByCidApi();

					}
				});

			},

			// 单品数据，由于没有提供单品的接口，我们尝试使用分页的接口来模拟单品的列表信息
			getDpListApi() {
				uni.request({
					url: 'http://106.52.75.114/api/home/products?page=2&limit=4&type=5&newsOrder&salesOrder&selectId&selectType=0',
					success: (res) => {
						this.dpList = res.data.data.list;
					}
				});


			},

			getXpListApi() {
				uni.request({
					url: 'http://106.52.75.114/api/home/products?page=1&limit=3&type=6&newsOrder&salesOrder&selectId&selectType=0',
					success: (res) => {
						this.xpList = res.data.data.list;
					}
				});
			},
			getCxListApi() {
				uni.request({
					url: 'http://106.52.75.114/api/home/products?page=1&limit=3&type=5&newsOrder&salesOrder&selectId&selectType=0',
					success: (res) => {
						// console.log('getCxListApi', res.data);
						this.cxList = res.data.data.list;
					}
				});
			},
			getBannerListApi() {
				uni.request({
					url: 'http://106.52.75.114/api/v2/home/banners',
					success: (res) => {
						this.bannerList = res.data.data.list;
					}
				});
			},
			getNavListApi() {
				uni.request({
					url: 'http://106.52.75.114/api/v2/home/navs',
					success: (res) => {
						// console.log('navListApi',  res.data);
						this.navList = res.data.data.list;
					}
				});
			},
			getHotListApi() {
				uni.request({
					url: 'http://106.52.75.114/api/v2/hot/keywords',
					success: (res) => {
						// console.log(res.data);
						this.hotList = res.data.data.list;
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	@import './index.less';
</style>